<template>
  <el-dialog :title="editWinTitle" :visible.sync="dialogFormVisible" :width="width" @closed="afterDialogClose">
    <el-form size="mini" label-width="80px">
      <input type="hidden" name="id" v-model="formValue.id" />

      <el-form-item v-for="(item,index) in inputTypeArray" :label="item.label" :key="index">

        <el-input v-if="item.type=='textarea'" type="textarea" v-model="formValue[item.name]" :rows=4></el-input>
        <el-input v-if="item.type=='text'" v-model="formValue[item.name]"></el-input>

        <el-select v-if="item.type=='select'" v-model="formValue[item.name]" placeholder="请选择">
          <el-option v-for="item in arrayData[item.name ]" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-select v-if="item.type=='select_multiple'" v-model="formValue[item.name]" placeholder="请选择" multiple>
          <el-option v-for="item in arrayData[item.name ]" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <!-- <el-select v-if="item.type=='boolean'" v-model="formValue[item.name + '']" placeholder="请选择">
          <el-option label="是" value="y"></el-option>
          <el-option label="否" value="n"></el-option>
        </el-select>

        <el-select v-if="item.type=='elment_select'" v-model="formValue[item.name + '']" placeholder="请选择">
          <el-option label="整数" value="int"></el-option>
          <el-option label="浮点数" value="double"></el-option>
          <el-option label="日期" value="date"></el-option>
        </el-select> -->

        <template v-if="item.type=='boolean'">
          <el-radio-group v-model="formValue[item.name]">
            <el-radio label="y">是</el-radio>
            <el-radio label="n">否</el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type=='elment_select'">
          <el-radio-group v-model="formValue[item.name]">
            <el-radio label="text">文本</el-radio>
            <el-radio label="int">整数</el-radio>
            <el-radio label="number">浮点数</el-radio>
            <el-radio label="date">日期</el-radio>
            <el-radio label="select">单选</el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type=='calculate_type_input'">
          <el-radio-group v-model="formValue[item.name]">
            <el-radio label="manual">手工输入</el-radio>
            <el-radio label="auto">自动计算</el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type=='status'">
          <el-radio-group v-model="formValue[item.name]">
            <el-radio label="enable">启用</el-radio>
            <el-radio label="disable">禁用</el-radio>
          </el-radio-group>
        </template>
        <!--法院类型 -->
        <template v-if="item.type=='courtType'">
          <el-radio-group v-model="formValue[item.name]">
            <el-radio label="lassen">网上法庭 lassen</el-radio>
            <el-radio label="kyubi">巨鲸2 kyubi</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitFormData" size="mini" :disabled="saveButtonDisabled">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      dialogFormVisible: false,
      editWinTitle: '',
      saveButtonDisabled: false,

      formValue: {},

      arrayData: {},

      inputTypeArray: [],

      fieldType: {},

      initFormValue: {}
    }
  },
  props: {
    submitUrl: String,
    detaillUrl: String,
    formInputs: String,
    hiddenInputs: String,
    titleHead: String,
    width: {
      type: String,
      default: '550px'
    }
  },
  computed: {

    // select 数组
    // arrayData() {
    //   var _this = this

    //   var tmps = this.formInputs.replace(/\s+/g, '').split(',')

    //   var arrayData = {}

    //   for (var i = 0; i < tmps.length; i++) {
    //     if (tmps[i] == '') {
    //       break
    //     }
    //     var tmps2 = tmps[i].split('|')

    //     if (tmps2[2] != 'select') {
    //       continue
    //     }

    //     var tmpField = {
    //       name: tmps2[0]
    //     }

    //     if (tmps2[3]) {
    //       tmpField.url = tmps2[3]
    //     }

    //     // 写在computed里的可能会被执行多次， 此处判断是为了防止重复执行

    //     if (tmpField.url && !tmpField.url.endWith('=')) {
    //       if (!arrayData[tmpField.name + 'Options']) {
    //         arrayData[tmpField.name + 'Options'] = []

    //         _this.$ajax({
    //           url: tmpField.url,
    //           method: 'post',
    //           scope: tmpField.name,
    //           success: function(responseData, scopeName) {
    //             if (responseData.data && responseData.data.rows) {
    //               arrayData[scopeName + 'Options'] = responseData.data.rows
    //             }
    //           }
    //         })
    //       }
    //     }
    //   }

    //   console.log(arrayData)

    //   return arrayData
    // },

    // initFormValue() {
    //   var tmpInitFormValue = {}

    //   // var tmps = this.hiddenInputs.replace(/\s+/g, '').split(',')
    //   // for (var i = 0; i < tmps.length; i++) {
    //   //   var tmps2 = tmps[i].split('=')
    //   //   tmpInitFormValue[tmps2[0]] = tmps2[1]
    //   // }

    //   return tmpInitFormValue
    // }
  },
  created () {
    var _this = this

    var tmps = this.hiddenInputs.replace(/\s+/g, '').split(',')
    for (var i = 0; i < tmps.length; i++) {
      var tmps2 = tmps[i].split('=')
      this.initFormValue[tmps2[0]] = tmps2[1]
    }

    tmps = this.formInputs.replace(/\s+/g, '').split(',')

    var tmpArray = []
    for (var i = 0; i < tmps.length; i++) {
      if (tmps[i] == '') {
        break
      }
      var tmps2 = tmps[i].split('|')

      var tmpField = {
        name: tmps2[0],
        label: tmps2[1]
      }

      if (tmps2[2]) {
        tmpField.type = tmps2[2]
      } else {
        tmpField.type = 'text'
      }

      if (tmpField.type == 'select_multiple') {
        this.initFormValue[tmpField.name] = []
      } else {
        this.initFormValue[tmpField.name] = ''
      }

      _this.fieldType[tmpField.name] = tmpField.type

      if (tmps2.length >= 3) {
        if (tmpField.type === 'select' || tmpField.type === 'select_multiple') {
          tmpField.url = tmps2[3]

          console.log(tmpField)

          _this.$ajax({
            url: tmpField.url,
            data: {
              name: tmpField.name
            },
            success: function (responseData, config) {
              let eltypeName = config.data.split('=')[1]

              if (responseData.data && responseData.data.rows) {
                _this.arrayData[eltypeName ] = responseData.data.rows
              }

              console.log(_this.arrayData)
            }
          })
        } else {
          // _this.initFormValue[tmpField.name] = tmps2[3];
        }
      } else {

      }

      // _this.initFormValue[tmpField.name]='';

      _this.inputTypeArray.push(tmpField)
    }
  },
  methods: {
    // 打开新增窗口
    showAddForm () {
      this.formValue = {}

      // for (var key in this.initFormValue) {
      //   this.formValue[key] = this.initFormValue[key]
      // }

      this.formValue = JSON.parse(JSON.stringify(this.initFormValue))

      this.editWinTitle = '新增' + this.titleHead
      this.dialogFormVisible = true
    },
    // 打开编辑窗口
    showEditForm (formId, view) {
      var _this = this
      if (view) {
        this.editWinTitle = this.titleHead
      } else {
        this.editWinTitle = '修改' + this.titleHead
      }

      this.formValue = JSON.parse(JSON.stringify(this.initFormValue))

      _this.$ajax({
        url: _this.detaillUrl,
        method: 'post',
        data: {
          'securityId': formId
        },
        success: function (responseData) {
          if (!responseData.data) {
            _this.$message({
              showClose: true,
              message: '返回数据格式异常',
              type: 'error'
            })
            return
          }

          //        for(var key in responseData.data ){
          //  _this.formValue[key] = responseData.data[key] + '';
          // }

          let formData = responseData.data

          for (var key in formData) {
            if (_this.fieldType[key] === 'select' || _this.fieldType[key] === 'select_multiple') {
              if (formData[key].indexOf('[') === 0 || formData[key].indexOf('{') === 0) {
                _this.formValue[key] = JSON.parse(formData[key])
              } else {
                _this.formValue[key] = formData[key]
              }
            } else {
              _this.formValue[key] = formData[key]
            }
          }
          // _this.formValue = responseData.data

          // for (var key in _this.initFormValue) {

          //   if(_this.fieldType[key] === 'select' || _this.fieldType[key] = 'select_multiple'){
          //     _this.formValue[key] = _this.initFormValue[key]
          //   }
          //   else{
          //     _this.formValue[key] = _this.initFormValue[key]
          //   }
          // }

          _this.dialogFormVisible = true
        }
      })
    },

    showEditRecord (record, isAdd) {
      var newRecord = {}
      for (var key in record) {
        newRecord[key] = record[key]
      }

      var _this = this

      if (isAdd) {
        _this.editWinTitle = '新增' + _this.titleHead
      } else {
        _this.editWinTitle = '修改' + _this.titleHead
      }
      _this.formValue = newRecord

      _this.dialogFormVisible = true
    },

    // 表单提交
    submitFormData () {
      var _this = this

      // //console.log(JSON.stringify(this.formValue))
      // 防止重复点击
      if (_this.saveButtonDisabled) {
        return
      }
      _this.saveButtonDisabled = true

      if (_this.submitUrl) {
        _this.$ajax({
          url: _this.submitUrl,
          method: 'post',
          data: _this.formValue,
          success: function (responseData) {
            _this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })

            _this.dialogFormVisible = false
            _this.$emit('afterOperationDone')
          },
          afterAjax: function () {
            _this.saveButtonDisabled = false
          }
        })
      } else {
        _this.dialogFormVisible = false
        _this.$emit('afterOperationDone')
      }
    },

    getFormData () {
      return this.formValue
    },

    afterDialogClose () {
      this.saveButtonDisabled = false
    }
  }
}

</script>
